<template>
	<view :class="checkedMask? 'fixeds':''">
		<!-- 顶部导航栏 -->
		<view class="nav">
			<uni-icons type="arrowleft" color="#ffffff" size="30" @click="goback"></uni-icons>
			<view>{{list.name}}</view>
		</view>

		<view class="head"></view>


		<!-- banner轮播 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
			<swiper-item v-for="item in list.skuList">
				<image :src="item.pic" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 收藏 -->




		<!-- 商品介绍 -->
		<view class="proContent">
			<view class="collect" @click="aboutCollect">
				<image class="uncollect" v-if="collect==false" src="../../../static/icons/collect.png" mode=""></image>
				<image class="iscollect" v-if="collect" src="../../../static/icons/collect1-active.png" mode=""></image>
			</view>
			<view class="proPrice">
				¥
				<view class="newPrice">
					<text v-if="list.promotionPrice">{{list.promotionPrice}}</text>
					<text v-if="list.promotionPrice==null || list.promotionPrice==false">{{list.price}}</text>
				</view>
				.00
				<view class="oldPrice" v-if="list.promotionPrice">
					¥{{list.price}}.00
				</view>
				<view class="discount">
					没有促销使用原价
				</view>
			</view>

			<!-- 商品名称及简介 -->
			<view class="proName">
				{{list.name}}
			</view>
			<view class="proDes">
				{{list.description}}
			</view>
		</view>


		<!-- 商品图片描述 -->
		<mp-html class="proDesPic" :tag-style="obj" :content="list.detailMobileHtml" />



		<!-- 购买相关 -->
		<view class="goBuy">
			<image src="../../../static/icons/kf.png" mode=""></image>
			<view class="aboutBuy">
				<view class="cart" @tap="openMask">
					添加到购物车
				</view>
				<view class="toBuy" @tap="goBuys">
					立即购买
				</view>
			</view>
		</view>




		<!-- 商品购买参数选择 -->
		<view class="mask" v-if="checkedMask">
			<view class="pic">
				<image class="comPic" :src="list.pic" mode=""></image>
				<image @tap="closeMask" class="shuts" src="../../../static/icons/fail.png" mode=""></image>
			
			<view class="tit1">单人沙发</view>
			<view class="tit2">库存数量</view>
			
			<!-- 商品选择 -->
			
				<view class="comChoiceTitle">商品选择</view>
			<view class="comChoicebox">	
				<view class="comChoice" :class="[isBorder==item.id? 'addBorder':'']" v-for="item in list.skuList" :key="item.id" @tap="choiceSize(item.id)">
					<text v-for="items in JSON.parse(item.spData)">{{items.key}}{{items.value}}</text>
				</view>
			</view>
			<!-- 特色服务 -->
			<view class="specServicebox">
				<view class="specServiceTitle">特色服务</view>
				<view class="specService1">
					送货上门
				</view>
				<view class="specService2">
					上门安装
				</view>
			</view>
			<!-- 购买数量 -->
			<view class="buyNumbox">
				<view class="buyNumName">购买数量</view>
				<view class="buyNum">
					<view class="numSub" @click="subNums">-</view>
					<view class="num">{{buyNums}}</view>
					<view class="numAdd" @click="addNums">+</view>
				</view>
			</view>
			
			
			<view class="confirm" @click="goBuyNext">
				确定
			</view>
			
			
			
			
			
			</view>
		</view>







	</view>
</template>

<script>
	import {
		productDetail,addCart
	} from "../../../api/home/index.js"
	export default {
		data() {
			return {
				ids: "",
				list: [],
				obj: {
					img: "width:80%;height:auto;padding: 34px;"
				},
				checkedMask:false,
				isBorder:'',
				buyNums:'1',
				goOrder:null,
				collect:false,
				infos:[],
			}
		},
		onLoad(item) {
			// 传入的id值
			this.ids = item.id
			console.log(this.ids)

			// 商品详情接口
			productDetail(this.ids).then(res => {
				console.log(res)
				this.list = res.data.product
				this.isBorder = res.data.product.skuList[0].id
				// 进入时判断是否收藏
				this.isCollect()
				console.log(this.list)
			});
			
			
	
			
		},
		methods: {
			// 返回上一页面
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			//关闭遮罩层
			closeMask(){
				this.checkedMask=false
			},
			//添加到购物车
			openMask(){
				this.checkedMask=true
				this.goOrder=false
			},
			// 立即购买
			goBuys(){
				this.checkedMask=true
				this.goOrder=true
			},
			// 选择产品规格
			choiceSize(val){
				this.isBorder=val
			},
			// 增加或减少购买数量
			addNums(){
				this.buyNums++
			},
			subNums(){
				if(this.buyNums==1){
					return 0
				}else{
					this.buyNums--
				}
				
			},
			//添加到购物车或立即购买
			goBuyNext(){
				if(this.goOrder){
					var arr = [this.list]
					arr.forEach(res=>{
						res.ids=this.ids,
						res.isBorder=this.isBorder,
						res.buyNums=this.buyNums,
						res.productPic=this.list.pic,
						res.productName=this.list.name,
						res.quantity=this.list.buyNums,
						res.productAttr=this.list.spData,
						res.isChecked=true
					})
					uni.setStorageSync("goBuys",JSON.stringify([arr]))
					uni.navigateTo({
						url:"../../user/cart/order/order?type=goBuy"
					})
				}else{
	
					addCart({
						productId:this.ids,
						productSkuId:this.isBorder,
						quantity:this.buyNums
					}).then(res=>{
						console.log(res)
					})
				}
			},
			// 是否收藏操作
			aboutCollect(){
				var collectList= uni.getStorageSync("collectList")
				if(collectList.length>0){
					var item = collectList.find(ele=>ele.id==this.list.id)
					var index = collectList.findIndex(ele=>ele.id==this.list.id)
					if(item){
						collectList.splice(index,1)
						uni.setStorageSync("collectList",collectList)
						this.collect=false
					}else{
						collectList.push(this.list)
						uni.setStorageSync("collectList",collectList)
						this.collect=true
						console.log(this.collect)
					}
				}else{
					var arr = []
					arr.push(this.list)
					uni.setStorageSync("collectList",arr)
					this.collect=true
				}
			},
			//判断是否收藏
			isCollect(){
				var collectList= uni.getStorageSync("collectList")
				var item = collectList.some(ele=>ele.id==this.list.id)
				console.log(collectList)
				if(collectList.length>0){
					if(item){
						
						this.collect=true
					}else{
						this.collect=false
					}
				}
				console.log(this.collect)
				
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>
<style lang="scss" scoped>
	.fixeds{
		height: 100vh;
		overflow: hidden;
	}
	// 顶部导航栏
	.nav {
		position: fixed;
		width: 369px;
		height: 30px;
		background-color: rgb(53, 78, 68);
		padding: 7px 3px;
		display: flex;

		view {
			margin: auto;
			font-size: 16px;
			font-weight: 700;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #ffffff;
		}
	}

	.head {
		width: 100%;
		height: 44px;
	}

	// banner轮播
	.swiper {
		height: 317px;

		swiper-item {

			image {
				width: 100%;
				height: 317px;

			}

		}
	}

	// 商品介绍
	.proContent {
		position: relative;
		padding: 35px;
		font-family: fantasy;
		.collect{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #000000;
			position: absolute;
			top: -20px;
			right: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			.uncollect{
				width: 30px;
				height: 30px;
			}
			.iscollect{
				width: 30px;
				height: 30px;
			}
		}
		.proPrice {
			display: flex;
			font-size: 16px;
			line-height: 30px;
			color: #f2270c;
			align-items: baseline;

			.newPrice {
				font-size: 30px;
			}

			.oldPrice {
				color: #b5b5b5;
				font-size: 12px;
				text-decoration: line-through;
			}

			.discount {
				position: relative;
				padding: 0 6px;
				color: #ffffff;
				background-color: #f2270c;
				font-size: 12px;
				line-height: 16px;
			}

			.discount::before {
				box-sizing: border-box;
				content: "";
				position: absolute;
				left: -1px;
				top: 50%;
				transform: translateY(-50%);
				width: 3px;
				height: 6px;
				background-color: #fff;
				border: 1px solid #ff8373;
				border-radius: 0 3px 3px 0;
				border-left: none;
			}

			.discount::after {
				box-sizing: border-box;
				content: "";
				position: absolute;
				right: -1px;
				top: 50%;
				transform: translateY(-50%);
				width: 3px;
				height: 6px;
				background-color: #fff;
				border: 1px solid #ff8373;
				border-radius: 3px 0 0 3px;
				border-right: none;
			}
		}

		.proName {
			font-weight: bold;
		}

		.proDes {
			font-size: 12px;
			padding-top: 18px;
			line-height: 1.3;
			color: #666;
		}

	}

	//购买相关
	.goBuy {
		position: fixed;
		z-index: 888;
		bottom: 0;
		left: 0;
		width: 315px;
		height: 60px;
		padding: 0 30px;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		align-items: center;

		image {
			width: 30px;
			height: 30px;
		}

		.aboutBuy {

			display: flex;
			line-height: 40px;
			text-align: center;
			font-size: 15px;

			.cart {
				width: 119px;
				height: 40px;
				background-color: #e2e2e2;
				color: #8f8f94;
			}

			.toBuy {
				width: 119px;
				height: 40px;
				color: #fff;

				background-color: #354e44;
			}
		}
	}

	//商品购买参数选择
	.mask {
		position: fixed;
		width: 314px;
		height: 463px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		.pic{
			width: 100%;
			height: 100%;
			position: relative;
			.comPic {
				width: 96px;
				height: 96px;
				position: absolute;
				left: 31px;
				top: -58px;
				border-radius: 5px;
			}
			.shuts{
				width: 21px;
				height: 21px;
				position: absolute;
				right: 40px;
				top: -10px;
			}
		}
		

		.tit1 {
			font-size: 14px;
			color: #3e3e3e;
			margin-left: 142px;
			margin-top: 42px;
			font-weight: 600;
		}

		.tit2 {
			font-size: 12px;
			color: #b0b0b0;
			margin-top: 3px;
			line-height: 16px;
			margin-left: 142px;
		}

		// 商品选择
		.comChoicebox {
			height: 89px;
			overflow: scroll;
			margin: 0 28px;

			

			.comChoice {
				box-sizing: border-box;
				padding-left: 5px;
				height: 30px;
				color: #3e3e3e;
				font-size: 13px;
				line-height: 30px;
				background: #f2f4f3;
				border-radius: 10px;
				margin: 5px;
				border: 2px solid transparent;
				&.addBorder{
					border: 2px #354e44 solid;
				}
			}
		}
		.comChoiceTitle {
				letter-spacing: 2px;
				font-weight: 600;
				font-size: 14px;
				color: #3e3e3e;
				margin: 14px 28px 0;
			}
		// 特色服务
		.specServicebox {
			margin: 14px 28px;

			.specServiceTitle {
				letter-spacing: 2px;
				font-weight: 600;
				font-size: 14px;
				color: #3e3e3e;
			}

			.specService1,
			.specService2 {
				box-sizing: border-box;
				padding-left: 5px;
				height: 30px;
				color: #3e3e3e;
				font-size: 13px;
				line-height: 30px;
				background: #f2f4f3;
				border-radius: 10px;
				margin: 5px;
			}
		}
		// 购买数量
		.buyNumbox{
			display: flex;
			margin: 14px 28px;
			justify-content: space-between;
			.buyNumName{
				letter-spacing: 2px;
				font-weight: 600;
				font-size: 14px;
				color: #3e3e3e;
			}
			.buyNum{
				display: flex;
				justify-content: flex-end;
				.numSub,.num,.numAdd{
					width: 30px;
					height: 30px;
					background: #f1ece7;
					border-radius: 50%;
					text-align: center;
					line-height: 30px;
					font-size: 15px;
					margin: 0 3px;
				}
				.num{
					width: 45px;
					border-radius: 15px;
				}
			}
			
		}
	.confirm{
				width: 104px;
				height: 40px;
				background: #354e44;
				border-radius: 14px;
				border-radius: 14px;
				margin: 24px auto;
				color: #fff;
				font-size: 16px;
				text-align: center;
				line-height: 40px;
			}
	
	
	}
	
	


</style>
